<template>
	<view class="goods-list">
		<goods-list :goods="goods"></goods-list>
		<view class="isOver" v-if="flag">----我是有底线的----</view>
	</view>
</template>

<script>
	import goodsList from "../../components/goods-list/goods-list.vue"
	export default {
		data() {
			return {
				pageindex:1,
				goods:[],
				flag:false
			}
		},
		components:{
			"goods-list":goodsList
		},
		methods: {
			// 获取商品列表的数据
			async getGoodsList(callBack){
				const res = await this.$myRequest({
					url:"api/getgoods?pageindex="+this.pageindex
				})
				console.log(res)
				this.goods = [...this.goods,...res.data.message]
			
				// 进入页面有callBack就调用，没有就不用调用
			    callBack && callBack()
				
			}
		},
		onLoad(){
			this.getGoodsList()
		},
		// 页面上拉触底事件的处理函数 
		onReachBottom(){
			// console.log("触底")
			if(this.goods.length <this.pageindex*10){
				return this.flag = true
			}
			this.pageindex++
			this.getGoodsList(()=>{
				// 关闭下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		// 监听用户下拉动作 
		onPullDownRefresh(){
			console.log("下拉刷新了")
			this.pageindex = 1
			this.goods = []
			this.flag = false
			setTimeout(()=>{
				this.getGoodsList()
			},1000)
		}
	}
</script>

<style lang="scss">
 .goods-list{
	 background: #eee;
 }
 .isOver{
	 width: 100%;
	 height: 100rpx;
	 line-height: 100rpx;
	 text-align: center;
	 // background: #fff;
	 font-size: 28rpx;
 }
</style>
